<!-- 报修 -->
<template>
  <div>
    <!--   返回上一页 <   -->
    <div class="page-title">
      <!--   返回上一页 <   -->
      <div class="page-title">
        <div class="flex justify-between" style="margin: 3px 4px 3px 0">
          <div class="flex items-center">
            <van-icon
              name="arrow-left"
              size="20"
              style="border-radius: 50%"
              @click="goBack"
            ></van-icon>
            <div class="ml-[10px]" style="margin-left: 130px">报修详情</div>
          </div>
          <div class="flex items-center">
            <van-icon name="ellipsis" size="20" />
          </div>
        </div>
        <hr />
      </div>
      <hr />
    </div>
    <div class="main-container h-[100vh]">
      <!--  报修信息  -->
      <!--      <div class="h-[30vh] flex flex-col justify-center items-center">-->
      <!--        <van-image round width="30vw" height="30vw" :src="defaultAvatarUrl" />-->
      <!--      </div>-->
      <div style="margin-top: 20px">
        <el-form ref="formRef">
          <el-form-item label="联系人" prop="name">
            <el-input v-model="forms.name" placeholder="请输入联系人" />
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="forms.phone" placeholder="请输入手机号" />
          </el-form-item>
          <el-form-item label="公寓信息" prop="info">
            <el-input v-model="forms.address" placeholder="请输入公寓位置信息" />
          </el-form-item>
          <el-form-item label="问题描述" prop="description">
            <el-input
              v-model="forms.description"
              placeholder="请输入问题描述"
              type="textarea"
            ></el-input>
          </el-form-item>
          <el-form-item label="问题图片" prop="imgUrl">
            <div aria-placeholder="上传图片">
              <el-upload
                class="avatar-uploader"
                :action="httpUrl"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :headers="{ 'access-token': useUserStore().token }"
              >
                <img v-if="forms.imgUrl" :src="forms.imgUrl" class="avatar"  alt=""/>
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
              </el-upload>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <van-form ref="formRef">
          <div class="mt-[50px]">
            <loading-button
              round
              block
              type="primary"
              native-type="submit"
              :loadingClick="onSubmitHandle"
            >
              提交
            </loading-button>
          </div>
        </van-form>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import defaultAvatarUrl from "../../../public/favicon.ico";
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getSmsCode } from "@/api/user";
import type { CountDownInstance, FormInstance } from "vant";
import { useUserStore } from "@/store/modules/user";
import LoadingButton from "@/components/LoadingButton/LoadingButton.vue";
import { ElMessage } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import http from "@/utils/http";
const route = useRoute();
const router = useRouter();
const userStore = useUserStore();
// 登录信息
const forms = ref({
  address: "",
  name: "",
  phone: "",
  description: "",
  imgUrl: ""
});
const httpUrl = import.meta.env.VITE_APP_BASE_URL + "/app/file/upload";
// 表单实例
const formRef = ref<FormInstance>();
//#region <倒计时相关>
// 倒计时
//#endregion
// 图片上传成功
const handleAvatarSuccess = (res: any, file: any) => {
  console.log(res.data);
  forms.value.imgUrl = res.data;
};
const onSubmitHandle = async () => {
  console.log("onSubmit");
  // 跳转上一页
  // await router.replace(
  //   route.query?.redirect
  //     ? decodeURIComponent(route.query?.redirect as string)
  //     : "/"
  // );
  http.post("/user/repair/addRepair", forms.value).then(res => {
    if (res.code === 200) {
      ElMessage("报修成功~");
    }
  });
};
// 返回上一页
const goBack = () => {
  router.go(-1);
};
onMounted(() => {
  console.log("route", route);
  console.log("router-onMounted", router);
});
</script>

<style scoped lang="less">
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
